<template>
  <my-modal ref="modal" title="修改手机号" :button="[{ text: '确认修改', type: 'gold', plain: false }]" @clickBtn="clickBtn" zIndex="9999">
    <view class="modal-container">
      <view class="form-item">
        <view class="input-title">手机号码</view>
        <view class="input-item">
          <input type="number" v-model="telphone" class="thorui-input" placeholder="请输入手机号码" placeholder-class="thorui-phcolor" />
          <view class="line-border"></view>
          <tui-countdown-verify
            :successVal="successVal"
            @send="send"
            :resetVal="resetVal"
            padding="0 15px"
            borderWidth="0"
            text="获取验证码"
            width="auto"
            height="auto"
          ></tui-countdown-verify>
        </view>
      </view>

      <view class="form-item">
        <view class="input-title">验证码</view>
        <view class="input-item">
          <input v-model="phoneCode" type="number" class="thorui-input" placeholder="请输入验证码" placeholder-class="thorui-phcolor" />
        </view>
      </view>
    </view>
  </my-modal>
</template>

<script>
export default {
  data() {
    return {
      successVal: 0,
      resetVal: 0,
      phoneCode: null,
      telphone: null
    }
  },
  onLoad() {},
  methods: {
    open(param) {
      this.$refs.modal.open({ showClose: this.$format(param, 'showClose', true) })
    },
    close() {
      this.$emit('afterModalClose')
      this.$refs.modal.close()
    },

    send() {
      if (!this.telphone || this.telphone.length !== 11) {
        this.resetVal++
        return this.$msg('text', '请填写正确的手机号')
      }

      this.sendPhoneCode(this.telphone)
    },
    // 获取手机验证码
    sendPhoneCode(telphone) {
      const baseParam = this.getBase(['token', 'selectuniacid'])
      if (!baseParam) return reject()

      Object.assign(baseParam, { telphone })

      console.param('获取手机验证码', baseParam)
      this.$api
        .sendPhoneCode(baseParam)
        .then(res => {
          console.res('获取手机验证码', res)
          this.successVal++
          this.$msg('text', this.$format(res, 'msg', '获取验证码成功'))
        })
        .catch(err => {
          console.err('获取手机验证码', err)
          this.resetVal++
          this.errMsg(err, '获取手机验证码失败')
        })
    },
    clickBtn() {
      if (!this.telphone || this.telphone.length !== 11) {
        return this.$msg('text', '请填写正确的手机号')
      }

      if (!this.phoneCode) {
        return this.$msg('text', '请先填写验证码')
      }

      const baseParam = this.getBase(['token', 'usertoken', 'selectuniacid'])
      if (!baseParam) return reject()
      console.param('个人中心修改手机号', baseParam)

      Object.assign(baseParam, { telphone: this.telphone, phonecode: this.phoneCode })

      // 个人中心修改手机号
      this.$api
        .editPhone(baseParam)
        .then(res => {
          console.res('个人中心修改手机号', res)
          this.$msg('success', this.$format(res, 'msg', '修改成功'))
          this.close()
        })
        .catch(err => {
          console.err('个人中心修改手机号', err)
          this.errMsg(err, '个人中心修改手机号失败')
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped></style>
